<template>
	<div id="root">
		<div class="todo-container">
		  <div class="todo-wrap">
			<myHeader @receive="receive"/>
			<myList :todos="todos" />
			<myFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
		  </div>
		</div>
	  </div>
</template>

<script>
	import myHeader from '@/components/my-header'
	import myFooter from '@/components/my-footer'
	import myList from '@/components/my-list'

	export default {
		name:'App',
		components:{
			myFooter,
			myHeader,
			myList
		},
		data(){
			return {
				//没有数组的时候返回的是null，null没有length属性，所以footer会报错
				//空数组也有length属性
				todos:JSON.parse(localStorage.getItem('todos')) || []
			}
		},
		methods:{
			//添加一个todo
			receive(x){
				this.todos.unshift(x)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id===id) todo.done=!todo.done
				})
			},
			deleteTodo(id){
				this.todos=this.todos.filter((todo)=>{
					return todo.id!==id
				})
			},
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done=done
				})
			},
			clearAllTodo(){
				this.todos=this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		},
		watch:{
			//value指的是新数据
			todos:{
				//需要深度监视，因为会改变元素内部的true和false值
				deep:true,
				handler(value){
					localStorage.setItem('todos',JSON.stringify(value))
				}	
			}
		},
		mounted(){
			this.$bus.$on('checkTodo',this.checkTodo)
			this.$bus.$on('deleteTodo',this.deleteTodo)
		},
		beforeDestroy(){
			this.$bus.$off('checkTodo')
			this.$bus.$off('deleteTodo')
		}
	}
</script>

<style >
	body {
		background: #fff;
	}
	
	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}
	
	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}
	
	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}
	
	.btn:focus {
		outline: none;
	}
	
	.todo-container {
		width: 600px;
		margin: 0 auto;
	}
	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>